<template>
  <div>
    <Yq-header :needBack="true">
      <p slot="content">会员中心</p>
    </Yq-header>
    <group gutter="0" style="padding-top: 38px;">
      <flexbox :gutter="0" style="padding: 10px 15px;">
        <flexbox-item :span="2.5"><div class="flex-demo">
          <img :src=user.avatar id="userImg">
        </div></flexbox-item>
        <flexbox-item :span="5"><div class="flex-demo" style="text-align: left;padding-left: 30px;">
          <span style="font-size: 15px;color: #636363">{{user.nick}}</span>
          <button id="vipMark">VIP</button>
          <p style="font-size: 13px;color: #636363"><span>{{user.vipExpiretime}}</span>到期</p>
        </div></flexbox-item>
        <flexbox-item><div class="flex-demo">
          <x-button type="mini" style="background: #f95320;" @click.native="goMember">续费</x-button>
        </div></flexbox-item>
      </flexbox>
    </group>
    <group title="会员权益">
      <ul style="font-size: 11px;padding: 10px 5px 10px 15px;list-style: none;color: #666">
        <li>1、尊享7×24小时电话医生、预约挂号服务;</li>
        <li>2、全场商品及服务均享受9折优惠;</li>
        <li>3、1元消费积1个积分(消费以实际支付金额为准，不足1元部分不作计算);</li>
        <li>4、独享积分、余额提现权益;</li>
      </ul>
    </group>
  </div>
</template>

<script>
  import { Group, Cell, XButton, Flexbox, FlexboxItem, Checker, CheckerItem } from 'vux'
  import * as types from '../../../../store/types'
  import YqHeader from '../../../../components/YqHeader.vue'

  export default {
    components: {
      Group,
      Cell,
      XButton,
      Flexbox,
      FlexboxItem,
      Checker,
      CheckerItem,
      YqHeader
    },
    data () {
      return {
        user: {
          avatar: '',
          nick: '',
          vipExpiretime: ''
        }
      }
    },
    methods: {
      goMember () {
        this.$store.commit(types.USER_INFO, {xufei: true})
        this.$router.push({
          path: '/member/GetMember'
        })
        this.$router.go(1)
      },
      weixinfn24 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let logo = this.$store.state.empower.LOGO
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    },
    mounted: function () {
      this.user = this.$store.state.userInfo
      this.weixinfn24()
    }
  }
</script>

<style scoped="scoped">
  .flex-demo {
    text-align: center;
    background-clip: padding-box;
  }
  #userImg{
    width: 68px;
    border-radius: 50%;
  }
  #vipMark{
    border: none;
    outline: none;
    background: #ff9000;
    color: white;
    padding: 2px 10px;
    border-radius: 5px;
    font-size: 10px;
  }
</style>
